<template>
  <div class="user-main">
    <el-button type="primary" style="margin:15px 0px 0px 15px;" @click="openDisplay()">添加</el-button>
    <!--列表-->
    <el-table :data="jobsList" border style="width: 100%;margin:15px;">
      <el-table-column prop="id" label="岗位id" width="150"/>
      <el-table-column prop="jobsName" label="岗位名称" width="150"/>
      <el-table-column prop="jobsIntroduce" label="岗位介绍"/>
      <el-table-column prop="status" width="150" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="success">启用</el-tag>
          <el-tag v-else type="info">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="200" align="center">
        <template slot-scope="scope">
          <el-dropdown>
            <el-button size="mini" type="primary">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button></el-dropdown-item>
              <el-dropdown-item><el-button v-if="scope.row.status === 1" size="mini" type="success" @click="toEnable(scope.row.id)">启用</el-button></el-dropdown-item>
              <el-dropdown-item><el-button v-if="scope.row.status === 0" size="mini" type="warning" @click="toDisable(scope.row.id)">禁用</el-button></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--添加对话框-->
    <el-dialog
      width="50%"
      title="添加岗位"
      :visible.sync="addDialog">
      <jobs-add @closeDisplay="closeDisplay" @getPageList="getPageList" />
    </el-dialog>
    <!--修改对话框-->
    <el-dialog
      width="50%"
      title="岗位信息"
      :visible.sync="update">
      <jobs-update v-if="update" :jobs="jobs" @closeDisplay="closeDisplay" @getPageList="getPageList" />
    </el-dialog>
  </div>
</template>

<script>

import jobsApi from '@/api/jobs'
import jobsAdd from './jobs-add'
import jobsUpdate from './jobs-update'

export default {
  components: {
    jobsAdd,
    jobsUpdate
  },
  data() {
    return {
      update: false,
      addDialog: false,
      jobsList:[],
      jobs:{}
    }
  },
  created() {
    this.getPageList()
  },
  methods: {
    getPageList() {
      jobsApi.getList().then(res => {
        this.jobsList = res.data
      })
    },
    openDisplay() {
      this.addDialog = true
    },
    closeDisplay() {
      this.addDialog = false
      this.update = false
    },
    toEnable(id){
      jobsApi.enable(id).then(res => {
        this.$message.success(res.data)
        this.getPageList()
      })
    },
    toDisable(id){
      jobsApi.delete(id).then(res => {
        this.$message.success(res.data)
        this.getPageList()
      })
    },
    handleEdit(row) {
      this.jobs = row
      this.update = true
    }
  }
}
</script>

<style scoped>
.user-main{
  padding: 2%;
  background-color: #f5f5f5;
}
</style>
